.single-column-nav-container {
  display: none;
  @media screen and (max-width: $single-column-max-width) {
    display: block;
    padding: 0;
    * {
      font-family: $sans-preferred-font-list;
      transition: opacity 0.5s ease-in-out;
      @include font-color("color-text");
    }
    button {
      padding: 0 12px;
    }
    .nav-content {
      padding: 12px 8px;
      justify-content: flex-start;
      max-width: unset;
    }
    .navbar-brand {
      opacity: 0;
      text-align: left;
      padding-left: 12px;
      flex: 1;

      &, &:hover {
        @include font-color("color-text");
      }
    }
    .nav-dropdown-toggle {
      display: flex;
      align-content: center;
      align-items: center;
      justify-items: center;
      justify-content: center;
      background: none;
      border: none;

      &:hover {
        color: #3f587d;
      }
    }
    .nav-darkmode-toggle {
      display: flex;
      align-content: center;
      align-items: center;
      justify-items: center;
      justify-content: center;
      background: none;
      border: none;

      &:hover {
        color: #3f587d;
      }
    }
    .nav-icon-group {
      z-index: 5;
      padding-right: 5px;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      li {
        display: inline;
        margin: 0;
        padding: 0;
      }
    }
    .nav-icon {
      padding: 8px;
    }
    .nav-background {
      opacity: 0;
      z-index: -1;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      @include background("color-nav-bg");
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }
  }
}
